<template>
	<view class="content">
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
			<view click="top">
				<image :src="top_bgc_img" class="top-bgc-img" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<view class="user-head">
					<view><button class="authorization head-btn" type="default"
							:style="{'background-image': 'url(' + avater + ')'}" open-type="chooseAvatar"
							@chooseavatar="chooseavatar"></button></view>
				</view>
				<view class="user-right">
					<view class="user-name"><input class="uni-input i-input"
							style="font-size: 20px;height: 40px;line-height: 40px;width: 100%;" type="nickname"
							v-model="nickName" :placeholder="nickName" @blur="handleNickNameChange"
							placeholder="点击获取微信名称" />
					</view>
					<view class="user-text">欢迎使用 SPORT DATA APP</view>
				</view>

			</view>

			<view class="info-time">
				<view class="info-time-tit">
					本次运动时间
				</view>
				<view class="info-time-t">
					<view class="info-time-t-n">{{sport_time}}</view>
					<view class="info-time-t-u">Min</view>
				</view>
				<view class="line"></view>
				<!--  -->
				<view class="info-time-tit" style="margin-top: 20px;">
					健康指数 MAI
				</view>
				<view class="info-time-t">
					<view class="info-time-t-n">{{mai}}</view>
					<view class="info-time-t-u">Mai</view>
				</view>

				<view class="line" style="width: 40%;"></view>
				<!--  -->
				<view class="info-time-tit" style="margin-top: 20px;">
					体重
				</view>
				<view class="info-time-t" @click="showPopup">
					<view class="info-time-t-n">{{user_tizhong}}</view>
					<view class="info-time-t-u">Kg</view>
				</view>
				<!--  -->
				<!-- <view class="ph">
					<view class="info-time-tit" style="margin-left: 30px;line-height: 50px;">
						热量排行
					</view>
					<view class="ph-l" style="margin-left: -3%;">
						<view class="ph-line"></view>
						<view class="ph-v">
							<p>体重</p>
							<p>{{p_reliang}}</p>
						</view>
					</view>
					<view class="ph-l">
						<view class="ph-line"></view>
						<view class="ph-v">
							<p>心率</p>
							<p>{{p_xinlv}}</p>
						</view>
					</view>
					<view class="ph-l">
						<view class="ph-line"></view>
						<view class="ph-v">
							<p>MAI</p>
							<p>{{p_mai}}</p>
						</view>
					</view>

				</view> -->
			</view>

			<!-- saomaio -->

			<view class="saomaio">
				<image :src="shimg" class="sh-img" mode="aspectFill" @click="scanCodeHandler"></image>
			</view>

			<!--  -->
			<view class="mid-info">

				<view class="mid-dev">
					<view class="mid-dev-i">
						<image :src="shimg" class="mid-dev-i-img" style="float: left;" mode="aspectFill"></image>
						<p style="font-size: 14px; color: black;float: left;margin-left: 10px;line-height: 40px;">{{m}}
						</p>
					</view>
					<view class="mid-dev-img">
						<image :src="shdevimg" class="mid-dev-img-img" mode="aspectFill"></image>
					</view>
				</view>

				<view class="mid">
					<view class="data-l">
						<view class="data-l-t">
							<view class="data-l-t-i">
								<image :src="xlimg" class="xl-img" mode="aspectFill"></image>
							</view>
							<view class="data-l-t-v">
								<p style="font-size: 14px;">心率max</p>
								<p>{{xinlv}}</p>
							</view>
						</view>
					</view>
					<view class="data-m">
						<view class="data-m-t">
							<view class="data-l-t-i">
								<image :src="xyimg" class="xl-img" mode="aspectFill"></image>
							</view>
							<view class="data-l-t-v">
								<p style="font-size: 14px;">血氧</p>
								<p>{{xueyang}}</p>
							</view>
						</view>
					</view>
					<view class="data-r">
						<view class="data-r-t">
							<view class="data-l-t-i">
								<image :src="rlimg" class="xl-img" mode="aspectFill"></image>
							</view>
							<view class="data-l-t-v">
								<p style="font-size: 14px;">热量</p>
								<p>{{reliang}}</p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-v">
				<p style="min-height: 10px;"></p>
			</view>
		</z-paging>

		<view>

			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog mode="input" title="请输入您的体重" placeholder="输入体重" @confirm="confirm">
				</uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				top_bgc_img: 'https://apps.vjfen.cn/static/images/bg.jpg',
				xlimg: 'https://apps.vjfen.cn/static/xl.png',
				xyimg: 'https://apps.vjfen.cn/static/xy.png',
				rlimg: 'https://apps.vjfen.cn/static/rl.png',
				shimg: 'https://apps.vjfen.cn/static/sh3.png',
				shdevimg: 'https://apps.vjfen.cn/static/shouhuan_02.png',
				bind_shdevimg: 'https://apps.vjfen.cn/static/shouhuan_01.png',
				m: '未绑定手环',
				avater: 'https://apps.vjfen.cn/static/headimg.png',
				nickName: '',
				sportData: '',
				userphone: '',
				mai: '0',
				dianliang: '0',
				xinlv: '0',
				reliang: '0',
				xueyang: '0',
				time: '00.00',
				p_reliang: '0',
				p_xinlv: '0',
				p_mai: '0',
				sport_time: '00.00',
				user_tizhong: 0,
			}
		},
		onLoad() {
			this.avater = uni.getStorageSync('user_headimg');
			this.nickName = uni.getStorageSync('user_name');
			this.user_tizhong = uni.getStorageSync('user_tizhong');
			if(!this.user_tizhong) this.user_tizhong = 0;
		},
		methods: {
			showPopup() {
				this.$refs.popup.open()
			},
			confirm(value) {
				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })

				// setTimeout(() => {
				// 	uni.hideLoading()
				// 	console.log(value)
				// 	this.user_tizhong = value
				// 	// 关闭窗口后，恢复默认内容
				// 	this.$refs.popup.close()
				// }, 3000)
				this.user_tizhong = value
				// 关闭窗口后，恢复默认内容
				this.$refs.popup.close()
			},
			chooseavatar(e) {
				this.avater = e.detail.avatarUrl;
				uni.setStorageSync('user_headimg', e.detail.avatarUrl);
			},
			handleNickNameChange(e) {
				this.nickName = e.detail.value;
				uni.setStorageSync('user_name', e.detail.value);
			},
			// 下拉刷新被触发
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					// 1.5秒之后停止刷新动画
					this.$refs.paging.complete();
					this.getNewSportData();
				}, 1500)
			},
			// 扫码按钮点击回调
			scanCodeHandler() {
				let that = this;
				// 调起条码扫描
				uni.scanCode({
					onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
					scanType: ['qrCode'], // 扫码类型 qrCode二维码
					autoZoom: false, // 是否启用自动放大，默认启用
					success: function(res) {
						console.log(`扫码结果：${JSON.stringify(res,null,2)}`);
						that.parseQRCode(res);

					},
					fail: function(err) {
						console.log(`错误：${err}`);
					},
					complete: function(data) {
						console.log(data.result);

					}
				});
			},
			parseQRCode(data) {
				uni.vibrateShort(); // 震动提示
				this.m = data.result;
				uni.showToast({
					title: data.result
				}) // 弹出提示
				this.bindMobile();
			},
			uploadData: function() {
				let that = this;
				if (this.m == '' || this.avatarUrl == '' || this.nickName == '') {
					this._baseClass.showToast('信息不完善', this._constant.errInco);
				} else {
					uni.showLoading({
						title: '上传数据'
					});
					that.$http_api.bind_shouhuan({
						user_headimg: this.avatarUrl,
						user_name: this.nickName,
						user_tizhong:this.user_tizhong,
						m: this.m,
					}).then((obj) => {
						console.log(JSON.stringify(obj))
						if (obj.res == "success") {
							uni.setStorageSync('user_mobile', this.userphone);
							uni.setStorageSync('user_headimg', this.avater);
							uni.setStorageSync('user_name', this.nickName);
							
							uni.setStorageSync('m', this.m);
							this.shdevimg = this.bind_shdevimg;
							uni.showToast({
								title: '成功绑定',
								duration: 1000
							});
							uni.navigateTo({
								url: 'pages/data/index', //选择体式
							})
						} else {
							this._baseClass.showToast('手环被占用', this._constant.failInco);
						}
					})

				}
			},
			bindMobile: function() {
				//短信发送成功后跳转发送验证码
				let self = this;
				if (this.nickName == '') {
					this._baseClass.showToast('微信昵称缺失', this._constant.errInco);
					return;
				}
				if (this.avater == '' ) {
					this._baseClass.showToast('添加头像', this._constant.errInco);
					return;
				}
				if (this.m == '') {
					this._baseClass.showToast('绑定手环', this._constant.errInco);
					return;
				}
				if (this.user_tizhong == 0) {
					this._baseClass.showToast('点击体重', this._constant.errInco);
					return;
				}
				uni.showLoading({
					title: '加载中',
				});
				
				uni.setStorageSync('user_tizhong', this.user_tizhong);
				
				uni.uploadFile({
					url: this._constant.baseUrl + 'upload_head_img',
					filePath: this.avater,
					name: 'images',
					success: uploadFileRes => {
						// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
						let data = JSON.parse(uploadFileRes.data);
						if (data.code === 1) {
							this.avatarUrl = data.ResultData;
							this.uploadData();
						}
					},
					fail: (error) => {
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 2000);

					}
				});
			},
			getNewSportData() {
				let that = this;
				this.$http_api.get_new_data({
					user_name: that.nickName
				}).then((obj) => {
					that.sportData = obj.sport_new_data
					console.log('obj' + JSON.stringify(obj))
					console.log('sport_time' + obj.sport_time)
					this.mai = that.sportData.mai
					this.meituo = that.sportData.meituo
					this.dianliang = that.sportData.dianliang
					this.xinlv = that.sportData.xinlv
					this.reliang = that.sportData.reliang
					this.xueyang = that.sportData.xueyang
					this.username = that.sportData.user_name
					this.sport_time = Math.round(obj.sport_time * 100) / 100;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		z-index: 0;
		width: 100%;
		background-color: #f5f3ea;
		display: flex;
		flex-direction: column;
		font-family: 'alimamafangyuan';
	}

	.top {
		background-size: 100%;
		height: 600px;
		width: 96%;
		position: absolute;
		left: 2%;
	}

	.top-bgc-img {
		width: 100%;
		height: 600px;
		// margin-left: 2%;
		// margin-top: 2%;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}

	.user-info {
		height: 100px;
		width: 100%;
		position: absolute;
		top: 80px;
		color: #dcff00;
		margin-left: 30px;
	}

	.user-head {
		height: 60px;
		width: 60px;
		background-color: #f5f5f5;
		border-radius: 60px;
		float: left;
	}

	.head-btn {
		height: 60px;
		width: 60px;
		border-radius: 60px;
		background: red;
		font-size: 12px;
		line-height: 60px;
		text-align: center;
		background: #dcff00;
		color: #fff;
		background-size: cover;
		background-position: center;
	}

	.user-right {
		float: left;
		margin-left: 20px;
		height: 60px;
	}

	.user-name {
		height: 40px;
		line-height: 40px;
		font-size: 20px;
	}

	.user-text {
		font-size: 14px;
		color: #f5f5f5;
	}

	.info-time {
		position: absolute;
		top: 200px;
		color: #fff;
		left: 40px;
		text-align: left;
	}

	.info-time-t-n {
		float: left;
		font-size: 60px;
		line-height: 180rpx;
		font-weight: bold;
	}

	.info-time-t-u {
		float: left;
		font-size: 14px;
		line-height: 115px;
		margin-left: 20px;
		font-family: 'alimamanum';
		color: #dcff00;
	}

	.line {
		height: 5px;
		border-radius: 5px;
		width: 190px;
		background-color: #dcff00;
		margin-top: 90px;
	}

	.ph {
		width: 100%;
		margin-left: 0px;
		height: 100px;
		margin-top: 80px;
	}

	.ph-l {
		float: left;
		width: 30%;
		height: 100px;
		margin-left: 3%;
	}

	.ph-line {
		height: 6px;
		width: 100%;
		background-color: #dcff00;
		border-radius: 6px;
	}

	.ph-v {
		line-height: 30px;
	}

	.saomaio {
		position: absolute;
		float: right;
		right: 20px;
		height: 90px;
		width: 60px;
		border-radius: 60px;
		background-color: #dcff00;
		z-index: 999;
		top: 480px;
		/* left: 50%;
		transform: translate(-50%, -10%);  */

	}

	.mid-dev {
		width: 46%;
		height: 250px;
		background: #dcff00;
		border-radius: 15px;
		float: left;
		margin-left: 2%;
		margin-top: 5px;
	}

	.mid-info {
		height: 250px;
	}

	.mid {
		float: left;
		width: 48%;
		margin-left: 2%;
	}

	.data-l {
		width: 100%;
		margin-top: 5px;
		box-sizing: border-box;
	}

	.data-l-t {
		width: 100%;
		height: 80px;
		border-radius: 15px;
		background-color: #fe7226;
	}

	.data-l-t-i {
		// background-color: #000;
		height: 80px;
		width: 80px;
		border-radius: 80px;
		float: left;
	}

	.data-l-t-v {
		float: left;
		font-family: 'alimamanum';
		font-weight: bold;
		color: #fff;
		text-align: left;
		width: 80px;
		font-size: 30px;
		margin-top: 15px;
	}

	.data-m {
		width: 100%;
		margin-top: 5px;
	}

	.data-m-t {
		width: 100%;
		height: 80px;
		border-radius: 15px;
		background-color: #fbb03c;
	}

	.data-r {
		width: 100%;
		margin-top: 5px;
	}

	.data-r-t {
		width: 100%;
		height: 80px;
		border-radius: 15px;
		background-color: #008b4f;
	}

	.xl-img {
		height: 30px;
		width: 30px;
		margin-top: 25px;
		margin-left: 20px;
	}

	.sh-img {
		width: 40px;
		height: 40px;
		margin-top: 25px;
		margin-left: 10px;
	}

	.bottom-v {
		width: 100%;
		min-height: 15px;
	}

	.mid-dev-i {
		height: 40px;
		width: 160px;
		background-color: #f5f3ea;
		margin-top: 5px;
		margin-left: 5px;
		border-radius: 40px;
		font-weight: bold;
	}

	.mid-dev-i-img {
		width: 30px;
		height: 30px;
		margin-left: 5px;
		margin-top: 5px;
	}

	.mid-dev-img {
		width: 100%;
	}

	.mid-dev-img-img {
		width: 150px;
		height: 150px;
		margin-left: 10px;
		margin-top: 20px;
	}
</style>